<template>
  <div>
    <div class="nav-box">
      <div class="nav">
        <span class="iconfont icon-liebiao"></span>
        <van-tabs swipeable v-model="active" @change="showTab">
          <van-tab title="听听"> </van-tab>
          <van-tab title="推荐"> </van-tab>
          <van-tab title="分类"> </van-tab>
        </van-tabs>
        <van-icon name="search" @click="getSearch" />
      </div>
    </div>
    <con-1 v-if="nowIndex == 0">
    </con-1>
    <con-2 v-else-if="nowIndex == 1"></con-2>
    <con-3 v-else="nowIndex == 2"></con-3>
    <!-- <router-view :key="$route.fullPath"></router-view> -->
  </div>
</template>
<script>
import Vue from "vue";
import { Tab, Tabs, Icon } from "vant";
import "@/assets/iconfont/iconfont.css";
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Icon);
import con1 from "./con1";
import con2 from "./con2";
import con3 from "./con3";
export default {
  data() {
    return {
      active: 0,
      nowIndex: 0,
    };
  },
  components: {
    con1,
    con2,
    con3,
  },
  created() {},
  methods: {
    showTab(evt) {
      this.nowIndex = evt;
    },
    getSearch(){
       this.$router.push("/bangdan");
    },

  },
};
</script>

<style scoped lang="scss" scoped>
.nav-box {
  height:44px;
  margin-bottom: 10px;
}
.nav {
  box-sizing: border-box;
  width:100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #fff;

}
/deep/ .van-tabs__wrap {
  width: 200px;
}
/deep/ .van-tab {
  font-size: 16px;
}
/deep/ .van-tabs__nav--line {
  padding-bottom: 3px;
}
.nav .van-icon-search::before {
  font-size: 25px;
}
.icon-liebiao:before {
  font-size: 25px;
}
</style>
